<template>
  <!-- 编辑商品规格 -->
  <div>
    <div>{{optionName}}</div>
    <el-tag
      v-for="item in list"
      :key="item.key"
      class="an-tages"
    >{{item.name}} 单价: {{item.price}}元 库存：{{item.stock}}</el-tag>
    <el-button type="primary" size="small" round @click="editOption">编辑规格</el-button>

    <dialog-options
      v-if="isVisible"
      v-model:isVisible="isVisible"
      :options="options"
      @call-back="callBackOption"
    />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import dialogOptions from "./dialogOptions.vue";
import { goodsOption, GoodsSpec } from "@/utils/interface";
@Options({
  components: {
    dialogOptions,
  },
  props: {
    options: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    list: {
      handler(nd) {
        if (nd.length > 0 && this.goodsSpec.length > 0) {
          this.goodsSpec.forEach((element: GoodsSpec) => {
            if (element.id == nd[0].goodsSpecID) {
              this.optionName = element.name;
            }
          });
        }
      },
      deep: true,
    },
  },
  emits: ["update:options"],
})
// 商品分类
export default class goodsOptions extends Vue {
  [x: string]: any;
  list: Array<goodsOption> = this.options;
  isVisible: Boolean = false;
  goodsSpec: Array<GoodsSpec> = [];
  optionName: string = "";
  data() {
    return {};
  }

  mounted() {
    this.getGoodsSpec();
  }

  // 获取规格属性
  getGoodsSpec() {
    this.$store
      .dispatch("appModule/getGoodsSpec")
      .then((res: Array<GoodsSpec>) => {
        if (res && res.length > 0) {
          this.goodsSpec = res;
        }
      });
  }

  // 编辑后的商品规格数据回传
  callBackOption(arry: Array<goodsOption>) {
    this.list = arry;
    this.$emit("update:options", arry);
  }

  editOption() {
    this.isVisible = true;
  }
}
</script>

<style lang="scss" scoped>
.an-tages {
  margin: 0 5px;
}
</style>



